<!-- 布局内容 -->
<template>
  <div
    class="layout-content abc"
    :class="{ 'no-basic-layout': isFullPage }"
    :style="containerStyle"
  >
    <!-- 节日滚动 -->
    <ArtFestivalTextScroll v-if="!isFullPage" />

    <RouterView
      v-if="isRefresh"
      v-slot="{ Component, route }"
      :style="contentStyle"
    >
      <!-- 路由信息调试 -->
      <div v-if="isOpenRouteInfo === 'true'" class="route-info">
        router meta：{{ route.meta }}
      </div>

      <!-- 缓存路由动画 -->
      <Transition
        :name="showTransitionMask ? '' : actualTransition"
        mode="out-in"
        appear
      >
        <KeepAlive :max="10" :exclude="keepAliveExclude">
          <component
            class="art-page-view"
            :is="Component"
            :key="route.path"
            v-if="route.meta.keepAlive"
          />
        </KeepAlive>
      </Transition>

      <!-- 非缓存路由动画 -->
      <Transition
        :name="showTransitionMask ? '' : actualTransition"
        mode="out-in"
        appear
      >
        <component
          class="art-page-view"
          :is="Component"
          :key="route.path"
          v-if="!route.meta.keepAlive"
        />
      </Transition>
    </RouterView>

    <!-- 全屏页面切换过渡遮罩（用于提升页面切换视觉体验） -->
    <Teleport to="body">
      <div v-show="showTransitionMask" class="full-page-mask" />
    </Teleport>
  </div>
</template>
<script setup lang="ts">
import type { CSSProperties } from "vue";
import { useRoute } from "vue-router";
import { useCommon } from "@/composables/useCommon";
import { useSettingStore } from "@/store/modules/setting";
import { useWorktabStore } from "@/store/modules/worktab";

defineOptions({ name: "ArtPageContent" });

const route = useRoute();
const { containerMinHeight } = useCommon();
const { pageTransition, containerWidth, refresh } =
  storeToRefs(useSettingStore());
const { keepAliveExclude } = storeToRefs(useWorktabStore());

const isRefresh = shallowRef(true);
const isOpenRouteInfo = import.meta.env.VITE_OPEN_ROUTE_INFO;
const showTransitionMask = ref(false);

// 检查当前路由是否需要使用无基础布局模式
const isFullPage = computed(() =>
  route.matched.some((r) => r.meta?.isFullPage),
);
const prevIsFullPage = ref(isFullPage.value);

// 切换动画名称：从全屏返回时不使用动画
const actualTransition = computed(() =>
  prevIsFullPage.value && !isFullPage.value ? "" : pageTransition.value,
);

// 监听全屏状态变化，显示过渡遮罩
watch(isFullPage, (val, oldVal) => {
  if (val !== oldVal) {
    showTransitionMask.value = true;
    // 延迟隐藏遮罩，给足时间让页面完成切换
    setTimeout(() => {
      showTransitionMask.value = false;
    }, 50);
  }

  nextTick(() => {
    prevIsFullPage.value = val;
  });
});

const containerStyle = computed(
  (): CSSProperties =>
    isFullPage.value
      ? {
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100vh",
          zIndex: 2500,
          background: "var(--art-bg-color)",
        }
      : {
          maxWidth: containerWidth.value,
        },
);

const contentStyle = computed(
  (): CSSProperties => ({
    minHeight: containerMinHeight.value,
  }),
);

const reload = () => {
  isRefresh.value = false;
  nextTick(() => {
    isRefresh.value = true;
  });
};

watch(refresh, reload, { flush: "post" });
</script>

<style lang="scss" scoped>
.layout-content {
  &.no-basic-layout {
    overflow: auto;
  }
}

.route-info {
  padding: 6px 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--art-gray-600);
  background: var(--art-gray-200);
  border: 1px solid var(--art-border-dashed-color);
  border-radius: 6px;
}

.full-page-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background-color: var(--art-main-bg-color);
}
</style>
